<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<body>
    <div id="app" class="layui-card-body padding-15" style="max-height: 650px;overflow-y: auto">
        <el-form label-position="right" label-width="80px" :model="formData" ref="formData" :rules="rules" class="demo-form-inline">

        <fieldset class="layui-bg-gray">
            <legend><b class="layui-badge layui-bg-blue">基础信息</b></legend>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs2 text-center padding-top-30">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/image"
                            name="image"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                        <img v-if="headimg" :src="headimg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <div class="layui-col-xs10 layui-col-space15">
                    <div class="layui-col-xs6">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                    </div>
                    <div class="layui-col-xs6">
                        <el-form-item label="身份证号" prop="cardNo">
                            <el-input v-model="formData.cardNo"></el-input>
                        </el-form-item>
                    </div>
                    <div class="layui-col-xs6">
                        <el-form-item label="手机号码" prop="phone" >
                            <el-input v-model="formData.phone"></el-input>
                        </el-form-item>
                    </div>
                    <div class="layui-col-xs6">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="formData.sex" placeholder="请选择">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="layui-col-xs6">
                        <el-form-item label="合同期限" prop="contractEnd" >
                            <el-date-picker type="date" placeholder="选择日期" format="yyyy-MM-dd" v-model="formData.contractEnd" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </div>
                </div>




            </div>

        </fieldset>
            <fieldset class="layui-bg-gray">
                <legend><b class="layui-badge layui-bg-blue">个人简介</b></legend>
                <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="formData.intro">
                </el-input>
            </fieldset>
            <fieldset class="layui-bg-gray">
                <legend><b class="layui-badge layui-bg-blue">技能证书</b></legend>
                <div class="layui-row layui-col-space15" style="max-height: 300px;overflow-y: auto;">

                    <div class="layui-col-xs6" v-for="(item,index) in credentials">
                        <div class="layui-panel" style="padding: 10px;display: flex;justify-content: space-between;align-items: center;" >
                            <div>
                            <el-upload
                                    class="avatar-uploader"
                                    action="/upload/image"
                                    name="image"
                                    :show-file-list="false"
                                    :on-success="(res, file) => handleSuccess(res, file, index)"
                                   >
                                <img v-if="credentials[index].img" :src="credentials[index].img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            </div>
                            <div>
                                <el-form-item label="证书名称" prop="credentialsTitle">
                                    <el-input v-model="item.title"  :disabled="item.title=='健康证明' || item.title=='技能证书'"></el-input>
                                </el-form-item>
                                <el-form-item label="到期时间" prop="credentialsExpireDate">
                                    <el-date-picker type="date"  format="yyyy-MM-dd" placeholder="选择日期" v-model="item.expireDate" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </div>
                            <div style="margin-left: 5px" v-if="item.title!='健康证明' && item.title!='技能证书'">
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCredentials(index)"></el-button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="text-center" style="margin-top: 10px">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="addCredentials">添加证书</el-button>
                </div>
            </fieldset>
            <div class="text-center layui-form-actions1">
                <el-button class="layui-btn" type="primary" @click="submitForm('formData')">保存</el-button>
                <button class="layui-btn layui-btn-danger" data-close data-confirm="确定要取消编辑吗？" type='button'>关闭</button>
            </div>
        </el-form>





    </div>


    <script th:inline="javascript" >
        require(['vue', 'ELEMENT'], function (Vue, ELEMENT) {
            ELEMENT.install(Vue)
            new Vue({
                el: '#app',
                data: {
                    headimg:"",
                    labelPosition:"left",
                    formData: {
                    },
                    credentials:[
                        {
                            title:'健康证明',
                            img:'',
                            expireDate:''
                        },
                        {
                            title:'技能证书',
                            img:'',
                            expireDate:''
                        }
                    ],
                    imageUrl: '',
                    rules: {
                        name: [
                            { required: true, message: '请输入护工姓名', trigger: 'blur' },
                        ],
                        cardNo: [
                            { required: true, message: '请输入身份证号', trigger: 'blur' },
                            {
                                pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$/,
                                message: '身份证号码格式不正确',
                                trigger: 'blur'
                            }
                        ],
                        phone: [
                            { required: true, message: '请输入手机号码', trigger: 'blur' },
                            {
                                pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                                message: '请输入有效的手机号码',
                                trigger: 'blur' // 可改为 'change' 实现实时验证
                            }
                        ],
                        sex: [
                            { required: true, message: '请选择性别', trigger: 'blur' },
                        ],
                        contractEnd: [
                            {type: 'date', required: true, message: '请选择合同期限', trigger: 'blur' },
                        ],


                    }
                },
                created() {
                    let id = [[${id}]]
                    console.log("formData",id)
                    let that = this
                    if(id!=null&&id!=0){
                        $.ajax({
                            url: '/pcs/porter/getFormData',
                            type: 'get',
                            data: {
                                id: id
                            },
                            success: function (res) {
                                console.log("getFormData",res)
                                if(res.code==1){
                                    that.formData = res.data.porter
                                    if(res.data.porter.contractEnd!=null){
                                        that.formData.contractEnd = new Date(res.data.porter.contractEnd)
                                        //整数类型转换成字符串类型
                                        that.formData.sex = res.data.porter.sex+""
                                        that.headimg = res.data.porter.headimg

                                    }
                                    that.credentials = res.data.credentials
                                }
                            }
                        })

                    }
                },
                methods: {
                    handleAvatarSuccess(res, file) {
                        console.log("handleAvatarSuccess",res)
                        console.log("handleAvatarSuccessres_file",file)
                        if(res.code==1){
                            $.msg.success("上传成功")
                            this.headimg = res.data.url
                        }else{
                            $.msg.success("上传失败")
                            //this.$message.error(res.info)
                        }
                       // this.formData.headimg = URL.createObjectURL(file.raw);

                    },

                    submitForm(formName){
                        console.log("submitForm",this.formData)
                        let that = this;
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                console.log('submit!');
                                let formData = that.formData;
                                formData.credentials = that.credentials
                                formData.headimg = that.headimg
                                console.log("formData",formData)
                                $.ajax({
                                    url: '/pcs/porter/save',
                                    type: 'POST',
                                    contentType: 'application/json',
                                    data: JSON.stringify(formData),
                                    success: function (res) {
                                        console.log("saveFormData",res)
                                        if(res.code==1){
                                            //$.msg.success("保存成功")
                                            layer.msg("操作成功",{icon:1,time:1000},function () {
                                                //刷新当前页
                                                window.location.reload();
                                            })
                                        }else{
                                            $.msg.error(res.info)
                                        }
                                    }
                                })
                                return false;
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    },
                    handleSuccess(res, file, index) {
                        if(res.code==1){
                            $.msg.success("上传成功")
                            this.credentials[index].img = res.data.url
                        }else{
                            $.msg.success("上传失败")
                        }
                    },
                    deleteCredentials(index){
                        this.credentials.splice(index,1)
                    },
                    addCredentials(){
                        this.credentials.push({
                            title:'',
                            img:'',
                            expireDate:''
                        })
                    },

                },


            })
        })
    </script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
            background: #fff;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
        .el-popper{
            z-index: 9999999999999!important;
        }
        .el-form-item{
            margin-bottom: 5px;
        }
    </style>
</body>
</html>
